import { useEffect, useState } from "react";
import Conpon from "../../componets/conpon";
import Header from "../../componets/Header";
import st from "./conpon.module.css";
import api from "../../api/request";
const ConponView = () => {
  const [data, setData] = useState([]);
  // 路由传参  用来接收一个是否是具有查看优惠券数量的切换  一个布尔值就行
  useEffect(() => {
    api.get("/me-api/coupons").then((res) => {
      console.log(res.data);
      setData(res.data.data);
    });
  }, []);

  // 存放所有的 选中的优惠券
  const [sendlist, setSendlist] = useState([]);
  return (
    <div className={st.container}>
      <Header leftIcon={true}>优惠券</Header>
      <ConponTabs />
      {/* 滚动元素的父元素 */}
      <div className={st.box}>
        {/* 滚动元素 */}
        <div className={st.main}>
          {data?.map((item: any, i: number) => (
            <Conpon item={item} isSend={true} key={i} />
          ))}
        </div>
        <div className={st.btn}>发券</div>
      </div>
    </div>
  );
};

const ConponTabs = () => {
  const [isAct, setIsAct] = useState("send");
  return (
    <div className={st.tabs}>
      <div className={st.default} onClick={() => setIsAct("default")}>
        <span className={isAct == "send" ? "" : st.active}>默认</span>
        <span
          className={`${st.bar} ${isAct == "send" ? "" : st.active}`}
        ></span>
      </div>
      <div className={st.send} onClick={() => setIsAct("send")}>
        <span className={isAct == "send" ? st.active : ""}>发券</span>
        <span
          className={`${st.bar} ${isAct == "send" ? st.active : ""}`}
        ></span>
      </div>
    </div>
  );
};
export default ConponView;
